<template>
  <div :class="className" :style="echartStyle" style="width: 100%;margin:10px auto 10px"/>
</template>
<script>
import echarts from './echarts'
export default {
  name: 'BaseEchart',
  props: {
    options: {
      required: true,
      type: Object,
      default () {
        return {}
      },
    },
    echartStyle: {
      type: Object,
      default () {
        return {
          height: '370px',
        }
      },
    },
    className: {
      type: String,
      default: 'chart',
    },
  },
  data () {
    return {
      myChart: '',
    }
  },
  watch: {
    options: {
      deep: true,
      handler (newVal, oldVal) {
        this.initEchart()
      },
    },
  },
  mounted () {
    this.myChart = echarts.init(this.$el)
    if (!this.options.customize) { this.options = Object.assign(this.options, { grid: { top: '30%' } }) }
    this.initEchart()
  },
  destroyed () {
    window.removeEventListener('resize', e => {})
  },
  methods: {
    initEchart () {
      this.myChart.setOption(this.options, true)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
  },
}
</script>
<style lang="stylus" scoped>
.echartBox
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 10px;

</style>